<template>
    <div class="login box">
        <img src="../../../../edu_client/static/image/1111.jpg"/>
        <div class="login">
            <div class="login-title">

                <img src="../../../../edu_client/static/image/logo.png"/>
                <p>百知教育给你最优质的学习体验!</p>
            </div>
            <div class="login_box">
                <div class="title">
                    <span>密码登录</span>
                    <span>短信登录</span>
                </div>
                <div class="inp" v-if="">
                    <input type="text" placeholder="用户名 / 手机号码" class="user" v-model="username">
                    <input type="password" name="" class="pwd" placeholder="密码" v-model="password">
                    <div id="geetest1"></div>
                    <div class="rember">
                        <p>
                            <input type="checkbox" class="no" v-model="remember_me"/>
                            <span>记住密码</span>
                        </p>
                        <p>忘记密码</p>
                    </div>
                    <button class="login_btn btn btn-primary" @click="get_captcha">登录</button>

                    <p class="go_login">没有账号
                        <router-link to="/user/register/">立即注册</router-link>
                    </p>
                </div>

            </div>

            </div>
        </div>

</template>

<script>
    export default {
        name: "Login",
        data() {
            return {
                username: "",
                password: "",
                remember_me: false,
            }
        },
        methods: {
            //登录
            u_login() {
                this.$axios({
                    url: "http://127.0.0.1:9000/user/login/",
                    method: "post",
                    data: {
                        username: this.username,
                        password: this.password
                    }

                }).then(res => {

                    console.log(res.data);
                    console.log(this.remember_me);
                    //此name和下面的username的值是同一个值,但是用途不同
                    //  此值在用户登录成功时用于显示在主页的值,即使用户满意点击记住我,也要显示,使用session
                    sessionStorage["name"] = res.data.username;
                    sessionStorage["user_token"] = res.data.token;
                    //判断是否勾选记住密码,(local时间为7天吧)通过判断remember_me的值
                    if (this.remember_me) {
                        localStorage["user_token"] = res.data.token;
                        localStorage["username"] = res.data.username;
                        localStorage["user_id"] = res.data.user_id;
                        localStorage["password"] = res.data.password;
                        localStorage["phone"] = res.data.phone
                        // let times=new Data().getTime()+(1000*10) //括号里面是毫秒,此时是10秒
                        // localStorage["times"]=times
                    } else {
                        //为假,代表用户不需要记住密码,需要将保存的用户信息删除
                        localStorage.clear()
                    }
                    this.$message({
                        message: "恭喜你,登录成功",
                        type: "success"

                    });
                    // 登录成功返回首页
                    this.$router.push("/home")
                }).catch(error => {
                    console.log(error);
                    this.$message.error("用户认证失败,用户名或密码错误")
                })
            },
            //用来判断是否有登录状态
            is_login() {
                let token = localStorage["user_token"]
                console.log(token)
                if (token) {
                    //token存在,直接进入主页面
                    this.$router.push('/index')
                    this.$message({
                        message: "你已经登录过了",
                        type: "success"

                    });
                } else {
                    //不存在,原地刷新继续登录
                    // this.$router.go(0)
                    // this.$message({
                    //     message:"你还没有登录",
                    //     type:"info"
                    // })
                    //上面的提示信息和退出按钮的消息提示有冲突,为了用户体验,这先不要提示
                }
            },
            //点击登录时,弹出验证框,当验证成功后,才可以发起请求
            get_captcha() {
                //想API服务器发起请求获取验证码
                this.$axios({
                    url: "http://127.0.0.1:9000/user/captcha/",
                    method: "get",
                    params: {
                        username: this.username,
                    }
                }).then(res => {
                    console.log(res.data);
                    let data = JSON.parse(res.data);
                    // 使用initGeetest接口
                    // 参数1：配置参数
                    // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
                    initGeetest({
                        gt: data.gt,
                        challenge: data.challenge,
                        product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
                        offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                        new_captcha: data.new_captcha
                    }, this.handlerPopup);
                }).catch(error => {
                    console.log(error);
                    this.$message.error("用户认证失败,用户名或密码错误")
                })
            },
            //请求验证码的回调函数,完成验证码的验证
            handlerPopup(captchaObj) {
                console.log("这是验证码的验证");
                console.log(captchaObj);
                let _this = this;
                captchaObj.onSuccess(function () {
                    let validate = captchaObj.getValidate();
                    _this.$axios({
                        url: "http://127.0.0.1:9000/user/captcha/",
                        method: "post",
                        // dataType: "json",
                        data: {
                            // username: $('#username1').val(),
                            // password: $('#password1').val(),
                            geetest_challenge: validate.geetest_challenge,
                            geetest_validate: validate.geetest_validate,
                            geetest_seccode: validate.geetest_seccode
                        },
                    }).then(res=>{
                        if(res.data.status){
                            //验证成功
                            _this.u_login()
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                });
                //将生产的验证码添加到一个id为geetest1标签中
                document.getElementById("geetest1").innerHTML="";
                captchaObj.appendTo("#geetest1");
            }
        },
        created() {
            //methods里面写一个函数,用来判断是不是记住登录状态了
            this.is_login()
        }
    }
</script>

<style scoped>
    .box {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
    }

    .box img {
        width: 100%;
        min-height: 100%;
    }

    .box .login {
        position: absolute;
        width: 500px;
        height: 400px;
        top: 0;
        left: 0;
        margin: auto;
        right: 0;
        bottom: 0;
        top: -338px;
    }

    .login .login-title {
        width: 100%;
        text-align: center;
    }

    .login-title img {
        width: 190px;
        height: auto;
    }

    .login-title p {
        font-family: PingFangSC-Regular;
        font-size: 18px;
        color: #fff;
        letter-spacing: .29px;
        padding-top: 10px;
        padding-bottom: 50px;
    }

    .login_box {
        width: 400px;
        height: auto;
        background: #fff;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .5);
        border-radius: 4px;
        margin: 0 auto;
        padding-bottom: 40px;
    }

    .login_box .title {
        font-size: 20px;
        color: #9b9b9b;
        letter-spacing: .32px;
        border-bottom: 1px solid #e6e6e6;
        display: flex;
        justify-content: space-around;
        padding: 50px 60px 0 60px;
        margin-bottom: 20px;
        cursor: pointer;
    }

    .login_box .title span:nth-of-type(1) {
        color: #4a4a4a;
        border-bottom: 2px solid #84cc39;
    }

    .inp {
        width: 350px;
        margin: 0 auto;
    }

    .inp input {
        border: 0;
        outline: 0;
        width: 100%;
        height: 45px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        text-indent: 20px;
        font-size: 14px;
        background: #fff !important;
    }

    .inp input.user {
        margin-bottom: 16px;
    }

    .inp .rember {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        margin-top: 10px;
    }

    .inp .rember p:first-of-type {
        font-size: 12px;
        color: #4a4a4a;
        letter-spacing: .19px;
        margin-left: 22px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        /*position: relative;*/
    }

    .inp .rember p:nth-of-type(2) {
        font-size: 14px;
        color: #9b9b9b;
        letter-spacing: .19px;
        cursor: pointer;
    }

    .inp .rember input {
        outline: 0;
        width: 30px;
        height: 45px;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
        text-indent: 20px;
        font-size: 14px;
        background: #fff !important;
    }

    .inp .rember p span {
        display: inline-block;
        font-size: 12px;
        width: 100px;
        /*position: absolute;*/
        /*left: 20px;*/

    }

    #geetest {
        margin-top: 20px;
    }

    .login_btn {
        width: 100%;
        height: 45px;
        background: #84cc39;
        border-radius: 5px;
        font-size: 16px;
        color: #fff;
        letter-spacing: .26px;
        margin-top: 30px;
    }

    .inp .go_login {
        text-align: center;
        font-size: 14px;
        color: #9b9b9b;
        letter-spacing: .26px;
        padding-top: 20px;
    }

    .inp .go_login span {
        color: #84cc39;
        cursor: pointer;
    }
</style>
